<template>
  <el-dialog
    title="确认删除"
    :visible.sync="visible"
    custom-class="dialog-style"
    width="500px"
  >
    <div>{{ message }}</div>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="!saving" @click="visible=false">取 消</el-button>
      <el-button type="primary" :loading="saving" @click="handleDelete">删 除</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DeleteMenu',
  props: {
    fn: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      saving: false,
      menuId: '',
      message: ''
    }
  },
  methods: {
    show(data) {
      this.menuId = data['id']
      this.message = '确定要删除菜单 <' + data['meta']['title'] + '> 吗？'
      this.visible = true
    },
    handleDelete() {
      this.saving = true
      this.fn(this, this.menuId).then(res => {
        this.$success('删除完成')
        this.saving = false
        this.visible = false
        this.$emit('delete', this.menuId)
      }).catch(() => {
        this.saving = false
      })
    }
  }
}
</script>
